<template>
  <div>
    <el-form ref="EditForm" :model="formModel" label-width="60px" :rules="validate">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名:" prop="name">
            <el-input
              v-model="formModel.name"
              placeholder="姓名"
              maxlength="20"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="帐号:" prop="username">
            <el-input
              v-model="formModel.username"
              :readonly="!!formModel.id"
              placeholder="帐号"
              maxlength="20"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="部门:" prop="departmentId">
            <el-tree-select
              ref="treeSelect"
              v-model="formModel.departmentId"
              :styles="styles"
              :select-params="selectParams"
              :tree-params="treeParams"
              @searchFun="_searchFun"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码:" prop="password">
            <el-input v-model="formModel.password" placeholder="密码" type="password" clearable />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="性别:" prop="sex">
            <el-radio-group v-model="formModel.sex">
              <el-radio
                v-for="(value,key,index) in getSystemDictionariesByType('SEXSTATUS')"
                :key="index"
                :label="key"
                border
              >{{ value }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话:" prop="phone">
            <el-input
              v-model="formModel.phone"
              placeholder="电话"
              show-word-limit
              maxlength="15"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="邮件:" prop="email">
            <el-input
              v-model="formModel.email"
              placeholder="邮件"
              show-word-limit
              maxlength="20"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态:" prop="status">
            <el-radio-group v-model="formModel.status">
              <el-radio
                v-for="(name,value,index) of getSystemDictionariesByType('USERSTATUS')"
                :key="index"
                :label="value"
                border
              >{{ name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="角色:" prop="rolesIds">
            <el-select
              v-model="formModel.rolesIds"
              style="width: 100%;"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="选择角色"
            >
              <el-option
                v-for="item in rolesData"
                :key="item.value"
                :disabled="item.status==='STOP_USING'"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位:" prop="postIds">
            <el-select
              v-model="formModel.postIds"
              style="width: 100%;"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="选择角色"
            >
              <el-option
                v-for="item in postData"
                :key="item.value"
                :disabled="item.status==='STOP_USING'"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注:" prop="remarks">
            <el-input
              v-model="formModel.remarks"
              type="textarea"
              resize="none"
              rows="5"
              placeholder="备注"
              show-word-limit
              maxlength="255"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { listToTree } from 'tree-walk-util'
import { findTreeREQ } from '@/api/system/department'
import { findRolesREQ } from '@/api/system/roles'
import { findPostREQ } from '@/api/system/post'
export default {
  name: 'EditForm',
  components: {},
  props: {
    formModel: {
      type: Object
    },
    validate: {
      type: Object
    }
  },
  data() {
    return {
      rolesData: [],
      postData: [],
      styles: {
        width: '100%'
      },
      selectParams: {
        multiple: false,
        clearable: true,
        placeholder: '请输入内容'
      },
      treeParams: {
        clickParent: true,
        filterable: true,
        'highlight-current': true,
        'check-strictly': true,
        'default-expand-all': true,
        'expand-on-click-node': false,
        data: [],
        props: {
          children: 'children',
          label: 'text',
          disabled: 'disabled',
          value: 'value'
        }
      }
    }
  },
  computed: {
    ...mapGetters({
      getSystemDictionariesByType: 'dictionaries/getSystemDictionariesByType'
    })
  },
  mounted() {
    findTreeREQ().then((data) => {
      data.map(v => {
        v.disabled = v.status === 'STOP_USING'
        return v
      })
      const tempData = listToTree(data, 'value', 'parentId', 'children').children
      this.$refs.treeSelect.treeDataUpdateFun(tempData)
    })
    findRolesREQ().then(data => {
      this.rolesData = data
    })
    findPostREQ().then(data => {
      this.postData = data
    })
  },
  methods: {
    _searchFun(value) {
      this.$refs.treeSelect.filterFun(value)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
